<template>
    <div>
      <h2>地点信息加载中...</h2>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import { useRoute } from 'vue-router';
  import { LocationListService } from '@/api/location'; // 请根据你的实际路径替换
  
  const locations = ref([]); // 用于存储所有地点信息
  const route = useRoute();
  
  // 在组件加载时调用 API 查询所有地点信息
  onMounted(async () => {
    try {
      // 获取所有地点信息
      const response = await LocationListService({});
      
      // 提取 list 数组
      locations.value = response.data.list; 
  
      // 将获取到的地点信息存储到本地
      localStorage.setItem('locations', JSON.stringify(locations.value));
  
      // 从路由中获取传递的参数并存到本地
      const locationInfo = {
        id: route.params.locationId,
        name: route.params.locationName,
      };
      localStorage.setItem('selectedLocation', JSON.stringify(locationInfo));
  
      console.log('所有地点信息已存储到本地:', locations.value);
      console.log('选中的地点信息已存储:', locationInfo);
  
    } catch (error) {
      console.error('获取地点列表失败:', error);
    }
  });
  
  // 在组件卸载时清除本地存储
  onBeforeUnmount(() => {
    localStorage.removeItem('locations');
    localStorage.removeItem('selectedLocation');
    console.log('本地存储已清除');
  });
  </script>
  
  <style scoped>
  /* 可以根据需要添加样式 */
  </style>
  